let container = null;
let currentPromise = null;
let currentClose = null;

const createContainer = () => {
  if (!container) {
    container = document.createElement('div');
    container.className = 'fixed left-1/2 top-6 z-[9999] pointer-events-none flex flex-col items-center w-full';
    container.style.transform = 'translateX(-50%)';
    document.body.appendChild(container);
  }
};

const showMessage = ({ content, type, duration = 3000 }) => {
  return new Promise((resolve) => {
    const element = document.createElement('div');
    element.className =
      `min-w-[160px] max-w-[480px] px-5 py-2 rounded-full shadow-lg border font-medium text-center
      opacity-0 scale-x-100 scale-y-100 -translate-y-6 transition-all duration-400 ease-out
      flex items-center justify-center text-sm
      ${{
        info: 'bg-blue-50 text-blue-600 border-blue-200',
        success: 'bg-green-50 text-green-600 border-green-200',
        error: 'bg-red-50 text-red-600 border-red-200',
        warning: 'bg-yellow-50 text-yellow-600 border-yellow-200'
      }[type]}`;

    element.innerHTML = `<span>${content}</span>`;
    container.appendChild(element);
    requestAnimationFrame(() => {
      element.classList.remove('opacity-0', '-translate-y-6');
      element.classList.add('opacity-100', 'translate-y-1', 'scale-x-110');
      element.style.transitionTimingFunction = 'cubic-bezier(.42,1.7,.58,1.0)';
      setTimeout(() => {
        element.classList.remove('translate-y-1', 'scale-x-110');
        element.classList.add('translate-y-0', 'scale-x-100');
      }, 250);
    });
    let closed = false;
    const close = () => {
      if (closed) return;
      closed = true;
      element.classList.remove('opacity-100', 'translate-y-0', 'scale-x-100', 'scale-y-100');
      element.classList.add('translate-y-2', 'scale-x-90', 'scale-y-110');
      element.style.transitionTimingFunction = 'cubic-bezier(.42,1.7,.58,1.0)';
      setTimeout(() => {
        element.classList.remove('translate-y-2', 'scale-x-90', 'scale-y-110');
        element.classList.add('opacity-0', '-translate-y-6', 'scale-x-75', 'scale-y-75');
        element.style.transitionTimingFunction = 'cubic-bezier(.42,1.7,.58,1.0)';
        setTimeout(() => {
          if (container.contains(element)) container.removeChild(element);
          resolve();
        }, 350);
      }, 180);
    };

    const timer = setTimeout(() => {
      close();
    }, duration);

    currentClose = () => {
      clearTimeout(timer);
      close();
    };
  });
};

const showQueue = async (content, type, duration) => {
  createContainer();
  if (currentPromise) {
    currentClose && currentClose();
    await currentPromise;
  }
  currentPromise = showMessage({ content, type, duration });
  await currentPromise;
  currentPromise = null;
  currentClose = null;
};

const message = {
  info: async (content, duration) => {
    await showQueue(content, 'info', duration);
  },
  success: async (content, duration) => {
    await showQueue(content, 'success', duration);
  },
  error: async (content, duration) => {
    await showQueue(content, 'error', duration);
  },
  warning: async (content, duration) => {
    await showQueue(content, 'warning', duration);
  }
};

export default message;